<template style="background: #f5f6fa">
  <div class="typical-home" ref="portaletDiv">
    <a-row :gutter="[16, 16]">
      <!-- 顶部列表 -->
      <a-col :span="24" class="module-list">
        <a-row :gutter="[16, 16]">
          <!-- 新增学员 -->
          <a-col :span="12">
            <div class="module-in module-in01">
              <a-row>
                <a-col :span="24" style="margin-top: 10px">
                  <h1 style="color: #666">
                    集团简介
                    <a-icon
                      :component="allIcon.companyIcon"
                      style="font-size: 20px"
                    />
                  </h1>
                </a-col>
                <a-col :span="24" v-if="works.company">
                  <div
                    v-html="works.company.contenthtml"
                    style="padding: 20px"
                  ></div>
                </a-col>
              </a-row>
            </div>
          </a-col>

          <a-col :span="12">
            <div class="module-in module-in01">
              <a-row>
                <a-col :span="24" style="margin-top: 10px">
                  <h1 style="color: #666">
                    待办事项<a-icon type="carry-out" style="margin-left: 5px" />
                  </h1>
                </a-col>
                <a-col :span="24">
                  <a-list
                    item-layout="horizontal"
                    :data-source="pageDaibanIngs"
                  >
                    <a-list-item slot="renderItem" slot-scope="item, index">
                      <span style="margin: 0 10px">{{ index + 1 }}、</span>
                      <a-tag color="green" v-if="item.type == '日常考核'">{{
                        item.type
                      }}</a-tag>
                      <a-tag color="blue" v-if="item.type == '年度月报'">{{
                        item.type
                      }}</a-tag>
                      <a-tag color="orange" v-if="item.type == '半年总结'">{{
                        item.type
                      }}</a-tag>
                      <a-tag color="purple" v-if="item.type == '年度总结'">{{
                        item.type
                      }}</a-tag>
                      <a-tag color="purple" v-if="item.type == '考核评分'">{{
                        item.type
                      }}</a-tag>
                      {{ item.content }}
                      <a
                        type="link"
                        @click="toPage(item.router, item.id)"
                        class="links"
                        style="color: blue; margin-left: 10px; font-size: 12px"
                        >【待办理】</a
                      >
                    </a-list-item>
                  </a-list>
                </a-col>
                <a-col
                  :span="24"
                  v-if="daibanIngs.length > 0"
                  style="text-align: right"
                >
                  <a-pagination
                    size="small"
                    :total="daibanIngs.length"
                    :pageSize="5"
                    @change="changePageDaibanIng"
                    @showSizeChange="changePageDaibanIng"
                /></a-col>
              </a-row>
            </div>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="24" class="module-list">
        <a-row :gutter="[16, 16]">
          <a-col :span="12">
            <div class="module-in module-in011">
              <a-row>
                <a-col :span="24" style="margin-top: 10px">
                  <h1 style="color: #666">
                    省市中央新闻链接<a-icon
                      type="link"
                      style="margin-left: 5px"
                    />
                  </h1>
                </a-col>
                <a-col :span="24">
                  <a-list
                    item-layout="horizontal"
                    :data-source="works.friendLinks"
                  >
                    <a-list-item slot="renderItem" slot-scope="item">
                      <!-- <span>{{ index + 1 }}、</span> -->
                      <a
                        :href="item.url"
                        target="_blank"
                        class="links"
                        style="margin: 0 10px"
                      >
                        {{ item.name }}
                      </a>
                    </a-list-item>
                  </a-list>
                </a-col>
              </a-row>
            </div>
          </a-col>

          <a-col :span="12">
            <div class="module-in module-in011">
              <a-row>
                <a-col :span="24" style="margin-top: 10px">
                  <h1 style="color: #666">
                    预警/其他<a-icon type="alert" style="margin-left: 5px" />
                  </h1>
                </a-col>
                <a-col :span="24">
                  <a-tabs>
                    <a-tab-pane key="1" tab="安环评分排名">
                      <a-table
                        :data-source="anHuanPaiMing"
                        size="small"
                        bordered="false"
                        :pagination="false"
                      >
                        <a-table-column
                          key="index"
                          title="排名"
                          data-index="index"
                          align="center"
                        >
                          <template slot-scope="text, record, index">{{
                            index + 1
                          }}</template>
                        </a-table-column>

                        <a-table-column
                          key="comname"
                          title="公司名称"
                          data-index="comname"
                          align="center"
                        />
                        <a-table-column
                          key="cycle"
                          title="评分周期"
                          data-index="cycle"
                          align="center"
                        />
                        <a-table-column
                          key="score"
                          title="当前评分"
                          data-index="score"
                          align="right"
                        />
                        <a-table-column
                          key="lastscore"
                          title="上季度评分"
                          data-index="lastscore"
                          align="right"
                        />
                        <a-table-column
                          key="avgscore"
                          title="核分平均分"
                          data-index="avgscore"
                          align="right"
                        />
                      </a-table>
                    </a-tab-pane>
                  </a-tabs>
                </a-col>
              </a-row>
            </div>
          </a-col>
        </a-row>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import allIcon from "@/core/icons";
import { getWorksIndex, anHuanPaiMing } from "@/api/biz/bizFriendLink";
export default {
  data() {
    return {
      // 月度新增标题
      monthTitle: "",
      // 总计标题
      allTitle: "",
      // 总计占比标题
      allStaTitle: "",
      // 总计年度标题
      yearTtile: "",
      visible: false,
      data: [],
      allIcon,
      monthData: [],
      fromOptions: [],
      staOptions: [],
      dateFormat: "YYYY-MM-DD",
      compile: false,
      len: [],
      works: {},
      others: [],
      daibanIngs: [],
      pageDaibanIngs: [],
      spinning: true,
      selectMoth: undefined,
      // 卡片加载
      listLoading: false,
      // 总数卡片
      cardLoading: false,
      allMonthStudent: {
        createTime: undefined,
      },
      allStudent: {
        createTime: undefined,
      },
      student: {
        createTime: undefined,
      },
      studenter: {
        createTime: undefined,
      },
      option: {
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: [],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [
            "一月",
            "二月",
            "三月",
            "四月",
            "五月",
            "六月",
            "七月",
            "八月",
            "九月",
            "十月",
            "十一月",
            "十二月",
          ],
        },
        yAxis: {
          type: "value",
        },
        series: [],
        page: 1,
        size: 5,
        pageTotal: 0,
        anHuanPaiMing: [],
      },
    };
  },
  created() {
    this.getWorkIndexs();
    this.onAnHuanPaiMing();
  },
  watch: {},
  mounted() {},
  components: {},
  methods: {
    onAnHuanPaiMing() {
      anHuanPaiMing().then((res) => {
        console.log(res);
        this.anHuanPaiMing = res.data;
      });
    },
    getWorkIndexs() {
      console.log("getWorkIndexs");
      getWorksIndex({}).then((res) => {
        this.works = res.data;
        this.daibanIngs = res.data.daibanIngs;
        this.pageSize(1);
      });
    },
    pageSize(page) {
      this.pageDaibanIngs = [];
      const start = (page - 1) * 5;
      const end = start + 5;
      this.pageDaibanIngs = this.daibanIngs.slice(start, end);
      console.log(this.pageDaibanIngs);
    },
    changePageDaibanIng(curtent, pageSize) {
      this.pageSize(curtent);
    },
    toPage(url, id) {
      this.$router.push({
        path: url,
      });
    },
    myEcharts(data) {
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(document.getElementById("main"));

      // 指定图表的配置项和数据
      var option = {
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "5%",
          left: "center",
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: "#fff",
              borderWidth: 2,
            },
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "40",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: data,
          },
        ],
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },

    myEcharts2(data, len) {
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(document.getElementById("main2"));

      // 指定图表的配置项和数据
      this.option.series = data;
      this.option.legend.data = len;
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(this.option);
    },
  },
};
</script>
<style lang="less">
@import "../typical-home.less";
</style>
<style lang="less">
.links {
  color: #1890ff;
}
.links:hover {
  color: #ff181c;
}
</style>
